<template>
	<el-row>
		<el-col :span="4">
			<div>
				<el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all accordion
					@node-click="selGoodsTypeByAdd">
				</el-tree>
			</div>
		</el-col>
		<el-col :span="20">
			<div>
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item>
						<el-button style="width: 200px;" type="primary" @click="dialogFormVisible = true">添加</el-button>
					</el-form-item>
					<el-form-item>
						<el-upload style="display: inline-block;" action="/export/inputExport" :show-file-list="false"
							:on-success="importSucc">
							<el-button type="primary" style="width: 200px;">文件导入</el-button>
						</el-upload>
						<!-- <el-upload class="upload" action="#" :show-file-list="false" :on-change="handleExcel"
						accept="'.xlsx','.xls'" :auto-upload="false" :headers="headers">
						<el-button style="width: 200px;" type="primary">文件导入</el-button>
					</el-upload> -->
					</el-form-item>
					<el-form-item>
						<el-button style="width: 200px;" type="primary" @click="outputExport()">文件导出<i
									class="el-icon-bottom"></i> </el-button>
					</el-form-item>
				</el-form>
				<el-table :data="goodsData" height="500">
					<el-table-column fixed prop="id" label="商品ID" width="80" align="center">
					</el-table-column>
					<el-table-column fixed prop="code" label="商品编码" width="100" align="center">
					</el-table-column>
					<el-table-column fixed prop="name" label="商品名称" width="120" align="center">
					</el-table-column>
					<el-table-column prop="inventoryQuantity" label="库存数量" width="120" align="center">
					</el-table-column>
					<el-table-column prop="minNum" label="库存下线" width="120" align="center">
					</el-table-column>
					<el-table-column prop="model" label="型号" width="120" align="center">
					</el-table-column>
					<el-table-column prop="producer" label="生产商" width="120" align="center">
					</el-table-column>
					<el-table-column prop="purchasingPrice" label="采购价" width="100" align="center">
					</el-table-column>
					<el-table-column prop="remarks" label="备注" width="120" align="center">
					</el-table-column>
					<el-table-column prop="sellingPrice" label="出库价" width="120" align="center">
					</el-table-column>
					<el-table-column prop="unit" label="商品单位" width="100" align="center">
					</el-table-column>
					<el-table-column prop="typeId" label="商品类型" width="100" align="center">
					</el-table-column>
					<el-table-column prop="maxNum" label="库存最大量" width="100" align="center">
					</el-table-column>
					<el-table-column prop="lastPurchasingPrice" label="上次采购价" width="100" align="center">
					</el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="150">
						<template slot-scope="scope">
							<el-button size="mini" type="danger"
								@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							<el-button type="primary" size="mini"
								@click="handleEdit(scope.$index, scope.row) ">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 新增模态框 -->
				<el-dialog title="新增" :visible.sync="dialogFormVisible">
					<el-form :model="TGoods">
						<el-form-item label="商品编码" :label-width="formLabelWidth">
							<el-input v-model="TGoods.code" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="商品名称" :label-width="formLabelWidth">
							<el-input v-model="TGoods.name" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="库存数量" :label-width="formLabelWidth">
							<el-input v-model="TGoods.inventoryQuantity" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="库存下线" :label-width="formLabelWidth">
							<el-input v-model="TGoods.minNum" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="型号" :label-width="formLabelWidth">
							<el-input v-model="TGoods.model" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="生产商" :label-width="formLabelWidth">
							<el-input v-model="TGoods.producer" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="采购价" :label-width="formLabelWidth">
							<el-input v-model="TGoods.purchasingPrice" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="备注" :label-width="formLabelWidth">
							<el-input v-model="TGoods.remarks" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="出库价" :label-width="formLabelWidth">
							<el-input v-model="TGoods.sellingPrice" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="商品单位" :label-width="formLabelWidth">
							<el-input v-model="TGoods.unit" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="商品类型" :label-width="formLabelWidth">
							<el-input v-model="TGoods.typeId" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="库存最大量" :label-width="formLabelWidth">
							<el-input v-model="TGoods.maxNum" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="上次采购价" :label-width="formLabelWidth">
							<el-input v-model="TGoods.lastPurchasingPrice" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="insertTGoods()">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 修改模态框 -->
				<el-dialog title="修改" :visible.sync="dialogFormVisible01">
					<el-form :model="TGoods">
						<el-form-item label="商品编码" :label-width="formLabelWidth">
							<el-input v-model="TGoods.code" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="商品名称" :label-width="formLabelWidth">
							<el-input v-model="TGoods.name" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="库存数量" :label-width="formLabelWidth">
							<el-input v-model="TGoods.inventoryQuantity" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="库存下线" :label-width="formLabelWidth">
							<el-input v-model="TGoods.minNum" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="型号" :label-width="formLabelWidth">
							<el-input v-model="TGoods.model" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="生产商" :label-width="formLabelWidth">
							<el-input v-model="TGoods.producer" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="采购价" :label-width="formLabelWidth">
							<el-input v-model="TGoods.purchasingPrice" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="备注" :label-width="formLabelWidth">
							<el-input v-model="TGoods.remarks" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="出库价" :label-width="formLabelWidth">
							<el-input v-model="TGoods.sellingPrice" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="商品单位" :label-width="formLabelWidth">
							<el-input v-model="TGoods.unit" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="商品类型" :label-width="formLabelWidth">
							<el-input v-model="TGoods.typeId" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="库存最大量" :label-width="formLabelWidth">
							<el-input v-model="TGoods.maxNum" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="上次采购价" :label-width="formLabelWidth">
							<el-input v-model="TGoods.lastPurchasingPrice" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible01 = false">取 消</el-button>
						<el-button type="primary" @click="updateTGoods()">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</el-col>

	</el-row>
</template>

<script>
	export default {
		mounted() {
			this.queryAllType();
			this.goodsQuery();
		},
		methods: {
			handleExcel() {
				 this.$postRequest("/export/inputExport", file).then(res => {});
			},
			outputExport() {
				window.location.href = "/export/outputExport/" + this.goodsObj.typeId;
			},
			handleEdit(index, row) {
				console.log(index, row);
				this.dialogFormVisible01 = true;
				this.TGoods = JSON.parse(JSON.stringify(row));
			},
			handleDelete(index, row) {
				console.log(row.id)
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$deleteRequest("/tGoods/deleteTGoods/" + row.id).then(res => {
						this.goodsQuery();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			updateTGoods() {
				this.$postRequest("/tGoods/insertAndUpdateTGoods", this.TGoods).then(res => {
					this.dialogFormVisible01 = false;
					this.queryAll();
				})
			},
			insertTGoods() {
				this.$postRequest("/tGoods/insertAndUpdateTGoods", this.TGoods).then(res => {
					this.dialogFormVisible = false;
					this.queryAll();
				})
			},
			goodsQuery() {
				this.$postRequest("/tGoods/queryTGoodsList/" + this.goodsObj.typeId).then(res => {
					this.goodsData = res.data.goodsList;
				});
			},
			selGoodsTypeByAdd(data) {
				//console.log(data);
				const state = data.state;
				console.log(state + "===========")
				if (state != 0) {
					console.log("===")
				} else {
					this.goodsObj.typeName = data.name;
					this.goodsObj.typeId = data.id;
					this.goodsQuery();
				}
			},
			queryAllType() {
				this.$postRequest("/tGoodsType/tGoodsTypeQuery/" + this.id).then(res => {
					this.data = res.data.goodsTypeList;
				});

			},
			filterNode(value, data, val) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			}
		},

		data() {
			return {
				headers: {
					"Content-Type": "multipart/form-data;charset=UTF-8"
				},
				TGoods: {
					id: null,
					code: '',
					inventoryQuantity: '',
					minNum: '',
					model: '',
					name: '',
					producer: '',
					purchasingPrice: '',
					remarks: '',
					sellingPrice: '',
					unit: '',
					typeId: '',
					maxNum: '',
					lastPurchasingPrice: ''
				},
				formLabelWidth: '120px',
				dialogFormVisible01: false,
				dialogFormVisible: false,
				goodsData: [],
				goodsObj: {
					typeName: '',
					typeId: 0
				},
				data: [],
				id: 1,
				defaultProps: {
					children: 'children',
					label: 'name'
				},
			};
		}
	};
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>